<template>
  <div v-if="metaList" class="statistics">
    <StatisticItem v-for="item in metaList" :key="item.name" :info="item" />
  </div>
</template>

<script>
import StatisticItem from './StatisticItem'

export default {
  props: {
    meta: {
      type: Array,
      default: null
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    metaList () {
      const { meta, data } = this
      if (!meta || !data) {
        return null
      }

      return meta.map(item => {
        const { name, format, aggregate } = item
        return {
          name,
          format,
          aggregate,
          ...data[name]
        }
      })
    }
  },
  components: {
    StatisticItem
  }
}
</script>

<style scoped>
  .statistics {
    margin-bottom: 4px;
    background: #E7F5FF;
    border: 1px solid #ADD9FD;
    padding: 10px 20px 5px 20px;
  }
</style>
